<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 文章管理 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
     style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入菜单名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单类型</label>
        <div class="layui-input-inline">
            <select name="type" lay-verify="required" lay-filter="type">
                <option value="">请选择</option>
                <option value="按钮">按钮</option>
                <option value="链接">链接</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <label class="layui-form-label">跳转链接</label>
        <div class="layui-input-inline">
            <input type="text" name="url" placeholder="请输入链接" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单分级</label>
        <div class="layui-input-inline">
            <input type="radio" name="level" value="1" title="一级" lay-filter="level" checked>
            <input type="radio" name="level" value="2" title="二级" lay-filter="level">
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <label class="layui-form-label">父级菜单</label>
        <div class="layui-input-inline">
            <select name="parentId"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" placeholder="请输入排序" name="sort">
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit"
               value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit"
               value="确认编辑">
        <input type="text" name="id">
        <button lay-active="get" id="getBtn">获取详情</button>
    </div>
</div>

<script src="../../layuiadmin/layui/layui.all.js"></script>
<script type="text/javascript" src="../../layuiadmin/default.js"></script>
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'util'], function () {
        let $ = layui.$
            , form = layui.form
            , util = layui.util;

        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function (data) {
            let field = data.field; //获取提交的字段
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            //$.ajax({});
            $.post('/menu/add', JSON.stringify(field), function (res) {
                if (res.code !== 0) {
                    layer.msg('操作出错:[' + res.message + ']', {icon: 5});
                } else {
                    layer.msg('操作成功', {icon: 6});
                    layer.close(index);
                }
            }, 'JSON');
            parent.layui.table.reload('LAY-table'); //重载表格
            parent.layer.close(index); //再执行关闭
        });

        // 监听编辑
        form.on('submit(layuiadmin-app-form-edit)', function (data) {
            let field = data.field; //获取提交的字段
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            //$.ajax({});
            $.post('/menu/update', JSON.stringify(field), function (res) {
                if (res.code !== 0) {
                    layer.msg('操作出错:[' + res.message + ']', {icon: 5});
                } else {
                    layer.msg('操作成功', {icon: 6});
                    layer.close(index);
                }
            }, 'JSON');
            parent.layui.table.reload('LAY-table'); //重载表格
            parent.layer.close(index); //再执行关闭
        });

        // 监听单选
        form.on('radio(level)', function (data) {
            let value = data.value;
            if (value == 2) {
                $.get('/menu/listRoot', function (res) {
                    if (res.code == 0 && res.data.length != 0) {
                        let _parentSelect = $('[name="parentId"]');
                        _parentSelect.empty();

                        _parentSelect.parent().parent().removeClass('layui-hide');

                        _parentSelect.append(new Option("请选择", ""));
                        $.each(res.data, function (index, item) {
                            _parentSelect.append(new Option(item.name, item.id));
                        });
                    }
                    form.render('select');
                })
            } else {
                $('[name="parentId"]').parent().parent().addClass('layui-hide');
            }
        });

        // 监听下拉框
        form.on('select(type)', function (data) {
            let _urlInput = $('[name="url"]');

            if (data.value == '链接') {
                _urlInput.parent().parent().removeClass('layui-hide');
            } else {
                _urlInput.parent().parent().addClass('layui-hide');
            }
        });


        // 监听按钮时间
        util.event('lay-active', {
            get: function (o) {
                let id = $('[name="id"]').val();

                $.get('/menu/get/' + id, function (res) {
                    if (res.code != 0) {
                        layer.msg('获取详情异常,' + res.message);
                        return;
                    }
                    let data = res.data;
                    form.val('layuiadmin-app-form-list', {
                        name: data.name,
                        type: data.type,
                        sort: data.sort,
                        url: data.url,
                        parentId: data.parentId
                    });

                    if ('链接' == data.type) {
                        $('[name="url"]').parent().parent().removeClass('layui-hide');
                    }

                    if (data.parentId != 0) {
                        console.log(1);
                        $('[name="level"]').attr('checked', false);
                    }

                });

            }
        })


    })
</script>
</body>
</html>